<style>
    .upload-image {
        background: url('__CDN__/assets/addons/example/img/plus.png') no-repeat center center;
        background-size: 30px 30px;
        height: 30px;
        width: 30px;
        border: 1px solid #ccc;
    }

    textarea.form-control {
        background: #eee;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('One_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-one_id" data-rule="required" data-source="typeone/index" class="form-control selectpage"
                name="row[one_id]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Two_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-two_id" class="form-control selectpicker" name="row[two_id]" data-rule="required">
                <!-- <option value="0">无</option> -->
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Goods_image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-goods_image" data-rule="required" class="form-control" size="50" name="row[goods_image]"
                    type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-goods_image" class="btn btn-danger faupload"
                            data-input-id="c-goods_image" data-resize-quality="0.9" data-resize-width="2000"
                            data-resize-height="2000"
                            data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp"
                            data-multiple="false" data-preview-id="p-goods_image"><i class="fa fa-upload"></i>
                            {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-goods_image" class="btn btn-primary fachoose"
                            data-input-id="c-goods_image" data-resize-quality="0.9" data-resize-width="2000"
                            data-resize-height="2000" data-mimetype="image/*" data-multiple="false"><i
                                class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-goods_image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-goods_image"></ul>
            <div class="tip" style="color: #999;font-size: 12px;margin-top: 5px;">
                <span class="help-block">{:__('产品封面尺寸建议: 336px*274px')}</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Goods_images')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-goods_images" data-rule="required" class="form-control" size="50" name="row[goods_images]"
                    type="textarea">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-goods_images" class="btn btn-danger faupload"
                            data-input-id="c-goods_images" data-resize-quality="0.9" data-resize-width="2000"
                            data-resize-height="2000"
                            data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp"
                            data-multiple="true" data-preview-id="p-goods_images"><i class="fa fa-upload"></i>
                            {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-goods_images" class="btn btn-primary fachoose"
                            data-input-id="c-goods_images" data-resize-quality="0.9" data-resize-width="2000"
                            data-resize-height="2000" data-mimetype="image/*" data-multiple="true"><i
                                class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-goods_images"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-goods_images"></ul>
            <div class="tip" style="color: #999;font-size: 12px;margin-top: 5px;">
                <span class="help-block">{:__('产品图尺寸建议: 750px*750px')}</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text">
        </div>
    </div>
    <!-- <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Sales')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-sales" class="form-control" name="row[sales]" type="text" value="">
        </div>
    </div> -->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Brand_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-brand_id" data-rule="required" data-source="brand/index" class="form-control selectpage"
                name="row[brand_id]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Orgin')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-orgin" class="form-control" name="row[orgin]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Vein')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-vein" class="form-control" name="row[vein]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Material')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-material" class="form-control" name="row[material]" type="text" value="">
        </div>
    </div>
    <!-- <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Size')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-size" class="form-control" name="row[size]" type="text" value="">
        </div>
    </div> -->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('简介')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-blurb" class="form-control" rows="5" name="row[blurb]" cols="50"
                style="background-color: #ffffff;"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Recommend')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select id="c-recommend" class="form-control selectpicker" name="row[recommend]">
                {foreach name="recommendList" item="vo"}
                <option value="{$key}" {in name="key" value="2" }selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group row">
        <label class="control-label col-xs-12 col-sm-2">{:__('Spec')}:</label>
        <!-- <div class="col-xs-12 col-sm-8">
            <textarea id="c-spec" class="form-control " rows="5" name="row[spec]" cols="50"></textarea>
        </div> -->
        <div class="col-xs-12 col-sm-8">
            <table class="table fieldlist" data-template="eventtpl" data-name="row[spec]" id="second-table">
                <tr>
                    <td>{:__('颜色')}</td>
                    <td>{:__('色值')}</td>
                    <td>{:__('图片')}</td>
                    <td width="100"></td>
                </tr>
                <tr>
                    <td colspan="4"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i
                                class="fa fa-plus"></i> {:__('Append')}</a></td>
                </tr>
                <tr>
                    <td colspan="4">
                        <div class="tip" style="color: #999;font-size: 12px;margin-top: 5px; text-align: center;">
                            <span class="help-block">{:__('产品规格图尺寸建议: 616px*410px')}</span>
                        </div>
                    </td>
                </tr>
            </table>

            <!--请注意实际开发中textarea应该添加个hidden进行隐藏-->
            <textarea style="display:none;" name="row[spec]" class="form-control" cols="30"
                rows="5">[{"color":"","image":""}]</textarea>
            <script id="eventtpl" type="text/html">
                <tr class="form-inline">
                    <td><input type="text" name="<%=name%>[<%=index%>][color_text]" class="form-control" value="<%=row.color_text%>" placeholder="颜色"/></td>
                    <td>
                        <div class="input-group">
                            <input type="text" name="<%=name%>[<%=index%>][color]" class="form-control color-value" value="<%=row.color%>" placeholder="#RRGGBB"/>
                            <span class="input-group-btn" style="position: relative;">
                                <img src="__CDN__/assets/addons/example/img/color.png" style="width: 15px;height: 15px; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); z-index: 9999;" alt="">
                                <input type="color" class="form-control color-picker" style="padding-left: 30px;"/>
                            </span>
                        </div>
                    </td>
                    <td>
                        <input type="hidden" name="<%=name%>[<%=index%>][image]" id="c-image-<%=index%>" value="<%=row.image%>">
                        <!--@formatter:off-->
                        <button type="button" id="faupload-image" class="btn btn-danger faupload upload-image" data-input-id="c-image-<%=index%>"  data-resize-quality="0.9" 
                            data-resize-width="2000"
                            data-resize-height="2000" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" <%if(row.image){%>style="background-image: url('<%=Fast.api.cdnurl(row.image)%>')"<%}%>></button>
                        <!--@formatter:on-->
                    </td>
                    <td>
                        <!--下面的两个按钮务必保留-->
                        <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                        <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                    </td>
                </tr>
            </script>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">

            <div class="radio">
                {foreach name="statusList" item="vo"}
                <label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio"
                        value="{$key}" {in name="key" value="1" }checked{/in} /> {$vo}</label>
                {/foreach}
            </div>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="0">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>